import React from 'react';
import { Table, Modal, message } from 'antd';
import Api from 'Utils/api';
import * as routerActions from 'react-router-redux';
import { connect } from 'react-redux';
import QUESTION_TYPE from 'Constants/questionTypeConstants';
import './index.scss';

const PAGE_SIZE = 5;
const confirm = Modal.confirm;

class SingleQuestion extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      currentPage: 1,
      totalCount: 0,
      id: props.subjectId,
    };
  }

  componentDidMount() {
    this.initData();
  }

  componentWillReceiveProps() {
    this.initData();
  }

  refresh() {
    this.initData();
  }

  initData() {
    const { currentPage } = this.state;
    const query = {};
    query.limit = PAGE_SIZE;
    query.offset = (currentPage - 1) * PAGE_SIZE;
    query.question_type = QUESTION_TYPE.sigle;
    const api = new Api({
      method: 'GET',
      path: `/choices/admin/question_type/${this.state.id}`,
      query,
      success: (json) => {
        this.setState({
          data: json.data_list,
          totalCount: json.total_count
        });
      },
      error: (msg) => {
        message.error(msg, 3);
      },
    });
    api.run();
  }

  generatorColumns() {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        width: 100,
        render: (text, record, index) => (
          <span>{((this.state.currentPage - 1) * PAGE_SIZE) + (index + 1)}</span>
        )
      },
      {
        title: '题面',
        dataIndex: 'question',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '操作',
        width: 300,
        dataIndex: 'operate',
        render: (text, record) => (
          <span className="operate">
            <span className="see" onClick={this.handleSee.bind(this, record.id)}>查看</span>
            <span className="edit" onClick={this.handleEdit.bind(this, record.id)}>修改</span>
            <span className="delete" onClick={this.handleDelete.bind(this, record.id)}>删除</span>
          </span>
        )
      }
    ];
  }

  handleSee(id) {
    this.props.dispatch(routerActions.push(`/system/corule/interactive/knowledge/sig_question_detail/${id}`));
  }

  handleEdit(id) {
    this.props.dispatch(routerActions.push(`/system/corule/interactive/knowledge/modify_question/${id}`));
  }

  handleDelete(id) {
    const self = this;
    confirm({
      title: '删除单选题',
      content: '确定删除该题型吗？',
      onOk() {
        const api = new Api({
          method: 'DELETE',
          path: `/choices/admin/${id}`,
          success: () => {
            self.initData();
          },
          error: (msg) => {
            message.error(msg, 3);
          },
        });
        api.run();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  onListPageChange(page) {
    this.setState({ currentPage: page }, () => {
      this.initData();
    });
  }

  render() {
    const columns = this.generatorColumns();
    const { data, totalCount, currentPage } = this.state;
    return (
      <div className="single-question-page">
        <div className="title-wrap">
          <span className="label">单选题</span>
        </div>
        <div className="table-wrap">
          <Table
            rowKey={record => record.id}
            columns={columns}
            bordered
            dataSource={data}
            pagination={{
              pageSize: PAGE_SIZE,
              total: totalCount,
              current: currentPage,
              onChange: this.onListPageChange.bind(this)
            }}
          />
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing
  };
}

export default connect(mapStateToProps)(SingleQuestion);
